body, header, section, footer, article, h1, h2, h3, h4, h5, h6, input, button, label, p, fieldset, nav, ul, li, a, span, strong, em {
    margin: 0;
    padding: 0;
    border: 0;
}

div, h1, h3, h4, h5, h6, header, footer, body, section, nav, article, aside {
    display: block;
}

.clearfix() {
	zoom: 1;
	&:after {
		content: "";
		display: block;
		clear: both;
		height: 0;
	}
}

.gradient (@top-color, @bottom-color) {
	background: @top-color; /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url();
	background: -moz-linear-gradient(top,  @top-color 0%, @bottom-color 15%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@top-color), color-stop(15%,@bottom-color)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  @top-color 0%,@bottom-color 15%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  @top-color 0%,@bottom-color 15%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  @top-color 0%,@bottom-color 15%); /* IE10+ */
	background: linear-gradient(to bottom,  @top-color 0%,@bottom-color 15%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@{top-color}', endColorstr='@{bottom-color}',GradientType=0 ); /* IE6-8 */
}

body {
	@border1: 1px solid #c0afce;
	@border2: 1px solid #3c2051;
	@bg-body: #9215f2;

	font: 14px normal Arial;
    color: white;
	background-color: @bg-body;
	.gradient (#d593ff, #9215f2);

	header {
        padding: 25px 15px 5px 15px;

		div#header-container {
			.clearfix();

			div#logo-container {
				float: left;
				position: relative;
			}

			div#reg-form-container {
				float: right;
				position: relative;
				right: 5%;
				top: 50%;

				div {
					text-align: right;

					label {
						width: 50px;
						margin: 5px;
					}

					input {
						width: 130px;
						border: 1px solid #603382;
						border-radius: 10px;
						padding: 2px 5px;
						margin: 5px;
						background-color: #b35ef3;
					}
				}

				button {
					margin-left: auto;
					margin-right: auto;
					font-weight: bold;
					border-left: @border1;
					border-top: @border1;
					border-right: @border2;
					border-bottom: @border2;
					border-style: outset;
					border-radius: 10px;
					padding: 5px 8px;
					color: #fff;
					background-color: #b35ef3;

					&:hover {
						background-color: #8949b9;
						border-style: inset;
					}
				}
			}
        }

		nav {
            display: inline-block;
            width: 75%;
            margin: 20px;
            padding: 12px;
            border: 1px solid #000;
			border-radius: 15px;
			.clearfix();

			ul.nav-list {
                list-style-type: none;
				.clearfix();

				li {
					float: left;
					margin: 0;

					a {
						text-decoration: none;
						padding: 0 10px;
						color: white;
						font: 1.4em normal Arial;

						&.selected {
							font-weight: bold;
						}
					}

					&:hover > a {
						text-decoration: underline;
						color: #a8a8a8;

						& + ul {
							display: block;
						}
					}

					ul.sub-nav-list {
						position: absolute;
						display: none;
						background-color: rgba(179, 94, 243, 0.9);
						border-radius: 5px;
						.clearfix();

						li {
							float: none;
							margin: 0 15px;
							padding: 10px 0;
							border-bottom: 1px solid black;

							& :last-of-type {
								border-bottom: none;
							}

							& > a {
								font-size: 1.2em;
								color: #fff;
							}
						}
					}
				}
            }
        }
    }

	section {
        width: 75%;
        float: left;
        color: #fff;
		.clearfix();

		article {
            margin: 20px;
            padding: 20px;
            border: 1px solid black;
			border-radius: 15px;

			header {
                background: none;
                padding: 5px;

				h1 {
                    font-size: 1.4em;
                    padding: 0;
                }
            }

			footer {
                padding: 5px;

				p {
                    font-size: 16px;
                    text-align: right;
                    font-weight: normal;

					time {
                        font-family: Consolas, 'Lucida Console', 'DejaVu Sans Mono', monospace;
                    }

					a {
                        text-decoration: none;
						color: #d4a3f8;

						&:hover {
                            text-decoration: underline;
                        }
                    }
                }
            }
        }
    }

	aside {
        float: left;
        width: 20%;
        margin: 20px;
		.clearfix();

		& > ul {
            list-style-type: none;

			& > li {
                margin: 15px 0;
                padding: 15px;
                border: 1px solid black;
                border-radius: 5px;

				h2 {
                    font-size: 1.1em;
                    font-weight: bold;
                }

				p {
                    margin: 10px 5px;
                    font-size: 14px;

					a {
                        color: #aaa;
                        text-decoration: none;
                    }

					strong {
                        color: #ccc;
                        font-weight: bold;
                        font-style: normal;
                    }

					em {
                        color: #ccc;
                        font-weight: normal;
                        font-style: italic;
                    }
                }

				ul {
                    list-style-type: none;
                    margin: 10px 0;

					li {
                        margin-top: 5px;
                        margin-left: 10px;
                        background: url(images/li-dot.png) no-repeat;
                        background-position: 0 50%;
                        padding-left: 25px;
                    }
                }
            }
        }
    }

	footer {
        clear: both;
        padding: 15px 0 25px 0;
        text-align: center;
		font-size: 18px;

		p {
            font-size: 1.2em;
            font-weight: bold;
        }
    }
}